<template>
  <div>
    <div>
      <div style="height:10px"></div>
      <div class="mgl20 title" style="margin-top:0px">基本信息</div>
      <van-cell-group inset>
        <van-cell title="问题类型" :value="Info.TypeName" />
        <van-cell title="描述信息" :value="Info.Description" />
        <van-cell title="预计完成时间" :value="Info.ExpectTime" />
        <van-cell title="创建日期" :value="Info.CreateTime" />
        <van-cell title="创建人" :value="$filterUserName(Info.CreateUser)" />
        <van-cell title="状态">
          <van-tag size="large" :type="TypeStatus[Info.State]">{{
            Types[Info.State]
          }}</van-tag>
        </van-cell>
        <Popover
          label="创建人附件"
          Type="file"
          :required="false"
          :labelWeight="false"
          :showBtn="false"
          v-model="Info.Files"
        />
      </van-cell-group>
    </div>
    <div>
      <div class="mgl20 title">场地信息</div>
      <van-cell-group inset>
        <van-cell title="区域名称" :value="Place.AreaName" />
        <van-cell
          title="区域类型"
          :value="Place.Type == 1 ? '教学场所' : '生活场所'"
        />
        <van-cell title="场地名称" :value="Place.Name" />
        <van-cell
          title="场地负责人"
          :value="$filterUserName(Place.Principal)"
        />
        <van-cell title="备注" :value="Place.Remark" />
        <van-cell title="场地位置" :value="Place.Location" />
        <van-cell title="展示图片">
          <van-image
            width="60"
            height="60"
            :src="$addFileHead(Place.ShowPicture)"
            @click="previewImg($addFileHead(Place.ShowPicture))"
          />
        </van-cell>
      </van-cell-group>
    </div>
    <div>
      <div class="mgl20 title">6S执行项</div>
      <van-cell-group inset>
        <van-cell :title="item.Content" v-for="item in formData.Items">
          <van-tag size="large" :type="PassStatus[item.State]">{{
            Pass[item.State]
          }}</van-tag>
        </van-cell>
      </van-cell-group>
    </div>
    <div v-if="Process">
      <div class="mgl20 title flex acener jbetween mgr20">
        <div>正在处理过程信息</div>
        <div>
          <van-tag type="primary" size="large" @click="goHistory"
            >历史记录</van-tag
          >
        </div>
      </div>
      <van-cell-group inset>
        <van-cell title="处理人" :value="$filterUserName(Process.Processor)" />
        <van-cell title="处理方式" :value="Process.Mode" />
        <van-cell title="创建人" :value="$filterUserName(Info.CreateUser)" />
        <van-cell title="创建时间" :value="Process.CreateTime" />
        <van-cell title="驳回原因" :value="Process.BackReason"> </van-cell>
        <van-cell title="驳回时间" :value="Process.BackTime"> </van-cell>
        <van-cell title="驳回人" :value="$filterUserName(Process.BackUser)">
        </van-cell>
        <Popover
          label="处理人附件"
          Type="file"
          :required="false"
          :labelWeight="false"
          :showBtn="false"
          v-model="Process.Process_Files"
        />
        <Popover
          label="驳回人附件"
          Type="file"
          :required="false"
          :labelWeight="false"
          :showBtn="false"
          v-model="Process.Back_Files"
        />
      </van-cell-group>
    </div>
    <div v-if="Info.State != 3">
      <div class="mgl20 title">处理操作</div>
      <div class="mgl20 mgr20">
        <van-button
          class="mgt20"
          round
          block
          type="danger"
          v-if="Info.State == 1"
          @click="handleProcess"
          >处理</van-button
        >
        <van-button
          class="mgt20"
          round
          block
          type="warning"
          @click="handleBack"
          v-if="Info.State == 2"
          >驳回</van-button
        >
        <van-button
          class="mgt20"
          round
          block
          @click="handleConfirmSubmit"
          type="success"
          v-if="Info.State == 2"
          >确认</van-button
        >
      </div>
    </div>
    <div class="mgb20"></div>
    <van-dialog
      v-model:show="show"
      :title="title"
      show-cancel-button
      @confirm="handleDialogConfirm"
    >
      <van-cell-group inset>
        <van-form>
          <Popover
            label="处理方式"
            Type="textarea"
            :required="true"
            v-model="handleData.Mode"
            labelAlign="top"
          />
          <Popover
            label="附件"
            labelAlign="top"
            Type="file"
            v-model="handleData.Files"
          />
        </van-form>
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script setup>
import { GetSixSaleDataDetail } from "@/api/sixManage/sixData.js";
import { showImagePreview } from "vant";
import {
  ProcessSixSaleData,
  ConfirmSixSaleData,
  RebackSixSaleData,
} from "@/api/sixManage/mySix.js";
import { getCurrentInstance, onMounted, proxyRefs, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const formData = ref({});
const Info = ref({});
const Place = ref({});
const show = ref(false);
const title = ref("");
const handleData = ref({});
const formRef = ref({});
const Process = ref({});
const Types = {
  1: "待处理",
  2: "待确认",
  3: "已完成",
};
const TypeStatus = {
  1: "danger",
  2: "warning",
  3: "success",
};
const Pass = {
  1: "合格",
  2: "不合格",
};
const PassStatus = {
  1: "success",
  2: "danger",
};

async function handleProcess() {
  title.value = "处理问题";
  show.value = true;
}

function handleBack() {
  title.value = "驳回问题";
  show.value = true;
}

async function handleConfirmSubmit() {
  try {
    await ConfirmSixSaleData({ ID: route.query.ID });
    getDetail();
  } catch (error) {
    console.log(error);
  }
}

function goHistory() {
  router.push({ path: "/SixManage/SixHistory", query: { ID: route.query.ID } });
}

function previewImg(url) {
  showImagePreview({images:[url],closeable:true});
}
 
async function handleDialogConfirm() {
  switch (title.value) {
    case "处理问题":
      handleProcessFunSubmit();
      break;
    case "驳回问题":
      handleBackFunSubmit();
      break;
  }
}

async function handleBackFunSubmit() {
  if (!handleData.value.Mode) {
    return proxy.$toast("驳回原因不能为空");
  }
  let query = {
    ID_SixSaleData: route.query.ID,
    BackReason: handleData.value.Mode,
    Files: handleData.value?.Files?.map((item) => {
      return {
        FileID: item.ID,
        Sort: item.Sort,
      };
    }),
  };
  await RebackSixSaleData(query);
  handleData.value = {
    Files: [],
  };
  show.value = false;
  getDetail();
}

async function handleProcessFunSubmit() {
  if (!handleData.value.Mode) {
    return proxy.$toast("处理方式不能为空");
  }
  try {
    let query = {
      ID_SixSaleData: route.query.ID,
      Mode: handleData.value.Mode,
      Files: handleData.value?.Files?.map((item) => {
        return {
          FileID: item.ID,
          Sort: item.Sort,
        };
      }),
    };
    await ProcessSixSaleData(query);
    show.value = false;
    handleData.value = { Files: [] };
    getDetail();
  } catch (error) {
    console.log(error);
  }
}

onMounted(() => {
  getDetail();
});

async function getDetail() {
  try {
    let res = await GetSixSaleDataDetail({ ID: route.query.ID });
    formData.value = res.data;
    Info.value = formData.value.Info;
    Place.value = formData.value.Place;
    Process.value = formData.value.Process;
    console.log(Process.value);
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 4rpx;
  // padding-top: 10rpx;
  margin-top: 10px;
  position: relative;
  padding-left: 10px;

  &::before{
    content: '';
    position: absolute;
    width: 4px;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background-color: #1989fa;
    border-radius: 2px;
  }
}
</style>
